import { Fragment } from '@/components/Fragment'; 
import { Message, View, Link } from '@aws-amplify/ui-react';
import { MessageDemo } from './demo';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
import ThemeExample from '@/components/ThemeExample.mdx';
import { Example, ExampleCode } from '@/components/Example';
import {
  BasicUsage,
  BasicWithDismiss,
  HideIcon,
  IconProviderExample,
  MessageColorThemes,
  MessageVariations,
  MessageGlobalStyling,
  MessageStyleProps,
  MessageAsAlert,
  MessageThemeExample
} from './examples';

## Demo

<MessageDemo />

## Usage

<Example>
  <BasicUsage />
  <ExampleCode>
    ```jsx file=./examples/BasicUsage.tsx

    ```

  </ExampleCode>
</Example>

### Color themes

Message accepts the `colorTheme` prop which allows for different color variations. The available options are `neutral` (default), `error`, `info`, `success`, and `warning`. Messages that use a `error`, `info`, `success`, or `warning` colorTheme will show an icon by default.

<Example>
  <MessageColorThemes />
  <ExampleCode>
    ```jsx file=./examples/MessageColorThemes.tsx

    ```

  </ExampleCode>
</Example>

### Icon

The Message icon can be hidden by using the prop `hasIcon={false}`. See this section on [using IconProvider to configure your own icons](#icons) for Message to use.

<Example>
  <HideIcon />
  <ExampleCode>
    ```jsx file=./examples/HideIcon.tsx

    ```

  </ExampleCode>
</Example>

### Variations

Message accepts the `variation` prop which allows for different background and border options.

<Example>
  <MessageVariations />
  <ExampleCode>
    ```jsx file=./examples/MessageVariations.tsx

    ```

  </ExampleCode>
</Example>

### Dismissable

Messages can be dismissed by setting `isDismissible={true}`. Additional dismiss behavior can be added by passing a function to the `onDismiss` prop. By default, we provide accessible button text that is hidden visually with [VisuallyHidden](./visuallyhidden); you can override this label by using the `dismissLabel` prop.

For more control over the appearance and functionality of the dismiss button, consider [using Message as a composable component](#composable).

<Example>
  <BasicWithDismiss />
  <ExampleCode>
    ```jsx file=./examples/BasicWithDismiss.tsx

    ```

  </ExampleCode>
</Example>

## Styling

<ThemeExample component="Message">
  <Example>
    <MessageThemeExample />
    
    <ExampleCode>

    ```tsx file=./examples/MessageThemeExample.tsx

    ```

    </ExampleCode>
  </Example>
</ThemeExample>

### Target classes

<ComponentStyleDisplay componentName="Message" />

### Global styling

To override styling on all Messages, you can override Amplify CSS variables or use the [target classes for Message](#target-classes) in your own stylesheet.

<Example>
  <MessageGlobalStyling />
  <ExampleCode>
    ```css
    /* Override CSS variables */
    [data-amplify-theme] {
      --amplify-components-message-filled-background-color: var(--amplify-colors-purple-10);
      --amplify-components-message-heading-font-size: var(--amplify-font-sizes-xl);
    }
    /* Or target class names */
    .amplify-message {
      background-color: var(--amplify-colors-purple-10);
    }
    .amplify-message__heading {
      font-size: var(--amplify-font-sizes-xl);
    }
    ```
  </ExampleCode>
</Example>

### Local styling

To override styling on a specific Message or sub-component, you can use (in order of increasing specificity): a class selector and style props.

<Example>
  <ExampleCode>
    ```jsx
    <Message className="my-message"></Message>
    ```
  
    ```css
    /* styles.css */
    .my-message {
      background-color: #ebffff;
    }
    ```
  </ExampleCode>
</Example>

#### Using style props
<Example>
  <MessageStyleProps />
  
  <ExampleCode>
  ```jsx file=./examples/MessageStyleProps.tsx
  ```
  </ExampleCode>
</Example>

### Icons

Message icons can be customized using IconProvider.

<Example>
  <IconProviderExample />
  
  <ExampleCode>

  ```tsx file=./examples/IconProviderExample.tsx

  ```

  </ExampleCode>
</Example>

## Accessibility

Message does not have an ARIA role configured by default. Depending on your own use case, you can pass a `role` attribute or add your own ARIA attributes where needed.

### As an alert

You can pass a role, such as `alert`, to the wrapper element of Message.

<Example>
  <MessageAsAlert />
  
  <ExampleCode>

  ```tsx file=./examples/MessageAsAlert.tsx

  ```

  </ExampleCode>
</Example>


